<template>
  <div class="about">
    <!-- v-for key   遍历数组 遍历对象 遍历数字  
      key在使用v-for的时候都需要设置key 最主要作用让界面中的元素和数组里的每个记录都进行绑定
      key值必须是唯一的
      -->
    <!-- v-for中 使用v-for key是必须写的-->
    <!-- <div v-for="(item, index) in arr" :key="index">
      {{ item.name }}--{{ item.age }}----{{ index }}
    </div> -->

    <!-- 
    v-if ：删除当前的dom元素  v-if适合只修改一次 
    v-show： 给元素设置display：none  v-show 适合频繁触发显示和隐藏的切换
    -->
    <div>
      <input type="text" v-model="first">
      <select name="" id="" v-model="operator">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
      </select>
      <input type="text" v-model="end">
      <button @click="calculate">=</button>
      <input type="text" v-model="firstEnd">
    </div>
    <!-- <div v-show="show" class="box"></div>
    <button @click="showBox">切换</button> -->
    <button @click="goFather">返回</button>
  </div>
</template>
<script>
export default {
  // 书写变量 存放数据
  data() {
    return {
      first: '',
      end: '',
      operator: '+', // 默认运算符
      firstEnd: '',
      show: true,
      arr: [
        {
          name: "zs",
          age: 18
        }, {
          name: "ls",
          age: 19
        }, {
          name: "ww",
          age: 20
        }, {
          name: "zl",
          age: 21
        }
      ]
    }
  },
  created() {

  },
  methods: {
    showBox() {
      this.show = !this.show
    },
    calculate() {
      // 将输入值转为数字，若需处理非数字情况，可添加校验逻辑
      const num1 = parseFloat(this.first);
      const num2 = parseFloat(this.end);
      switch (this.operator) {
        case '+':
          this.firstEnd = num1 + num2;
          break;
        case '-':
          this.firstEnd = num1 - num2;
          break;
        case '*':
          this.firstEnd = num1 * num2;
          break;
        case '/':
          // 简单处理除数为 0 情况，实际项目可优化提示
          if (num2 === 0) {
            this.firstEnd = '除数不能为 0';
          } else {
            this.firstEnd = num1 / num2;
          }
          break;
        default:
          this.firstEnd = '';
      }
    },
    goFather() {
      // this.$router.go(-2)
      // this.$router.back()
    }
  }

}
</script>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: aqua;
}
</style>